{% extends "base.html" %}

{% block content %}
<div class="container">
    <h1>YouTube 视频下载器</h1>
    <div class="download-form">
        <input type="text" id="url" placeholder="请输入 YouTube 视频链接...">
        <div class="buttons">
            <button onclick="downloadContent('video')">下载视频</button>
            <button onclick="downloadContent('audio')">提取音频</button>
        </div>
    </div>

    <div id="loading" class="loading hidden">
        <div class="spinner"></div>
        <p>正在下载中...</p>
    </div>

    <div id="result" class="result hidden">
        <div class="video-info">
            <img id="thumbnail" src="" alt="视频缩略图">
            <div class="info">
                <h2 id="title"></h2>
                <p id="uploader"></p>
                <p id="duration"></p>
                <p id="view_count"></p>
            </div>
        </div>
        <div class="download-links">
            <div id="video-preview" class="preview-container hidden">
                <h3>视频预览</h3>
                <video controls>
                    <source src="" type="video/mp4">
                </video>
            </div>
            <div id="audio-preview" class="preview-container hidden">
                <h3>音频预览</h3>
                <audio controls>
                    <source src="" type="audio/mp3">
                </audio>
            </div>
        </div>
    </div>
</div>
{% endblock %} 